<template>
  <aside>
    <div class="header">
      <div class="title">{{ stock.name }}</div>
      <!-- <div class="tips">Spot WTI Crude Oil, 1lot ={{ stock.num_to_price }}</div> -->
    </div>
    <!-- 分类 -->
    <div class="sort">
      <div class="sort_item" v-for="(item, index) in sortList" :key="item.id">
        <div
          class="item_inner"
          :class="current == index ? 'active_inner' : ''"
          @click="changeSort(index)"
        >
          <div class="text">{{ item.name }}</div>
          <div class="inner_bottom"></div>
        </div>
      </div>
    </div>
    <div class="list_box">
      <div class="list" v-if="current == 0">
        <div class="item">
          <div class="item_title">{{ $t("数量") }}</div>
          <div class="item_group">
            <div class="inner_step">
              <el-input-number
                v-model="num"
                :precision="2"
                :step="0.01"
                :min="0.01"
                :max="1000"
              />
            </div>
            <!-- 倍率 -->
            <div class="inner_beilv">
              <div
                class="beilv_item"
                v-for="(item, index) in beilv"
                :key="index"
                @click="changeNum(item)"
              >
                x{{ item }}
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="item_title">{{ $t("止损价") }}</div>
          <div class="item_group">
            <div class="inner_step">
              <el-input-number
                v-model="downPrice"
                :precision="5"
                :step="0.00001"
                :min="0.00001"
                :max="100000"
              />
            </div>
          </div>
        </div>
        <div class="item">
          <div class="item_title">{{ $t("获利价") }}</div>
          <div class="item_group">
            <div class="inner_step">
              <el-input-number
                v-model="upPrice"
                :precision="5"
                :step="0.00001"
                :min="0.00001"
                :max="100000"
              />
            </div>
          </div>
        </div>
        <!-- <div class="item">
          <div class="item_title">价格</div>
          <div class="item_group">
            <div class="price_box">
              <div class="up_price price_item">74.36</div>
              <div class="down_price price_item">76.83</div>
              <div class="price_num">5</div>
            </div>
          </div>
        </div> -->
        <div class="item_btns">
          <el-button class="item_btn" type="success" @click="buyOrSell(1, 1)">{{
            $t("买入")
          }}</el-button>
          <el-button class="item_btn" type="danger" @click="buyOrSell(2, 1)">{{
            $t("卖出")
          }}</el-button>
        </div>
      </div>
      <div class="list" v-if="current == 1">
        <div class="item">
          <div class="item_title">{{ $t("类型") }}</div>
          <div class="item_type">
            <div class="type_box" @click="typeShow = !typeShow">
              <div class="type_title">{{ activeType.title }}</div>
              <el-icon><ArrowDownBold /></el-icon>
            </div>
            <div class="type_list" v-if="typeShow">
              <div
                class="type_item"
                v-for="(item, index) in typeList"
                :key="index"
                @click="chooseType(item)"
              >
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="item_title">{{ $t("数量") }}</div>
          <div class="item_group">
            <div class="inner_step">
              <el-input-number
                v-model="num"
                :precision="2"
                :step="0.01"
                :min="0.01"
                :max="1000"
              />
            </div>
            <!-- 倍率 -->
            <div class="inner_beilv">
              <div
                class="beilv_item"
                v-for="(item, index) in beilv"
                :key="index"
                @click="changeNum(item)"
              >
                x{{ item }}
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="item_title">{{ $t("价格") }}</div>
          <div class="item_group">
            <div class="inner_step">
              <el-input-number
                v-model="price"
                :precision="5"
                :step="0.00001"
                :min="0.00001"
                :max="100000"
              />
            </div>
          </div>
        </div>
        <div class="item">
          <div class="item_title">{{ $t("止损价") }}</div>
          <div class="item_group">
            <div class="inner_step">
              <el-input-number
                v-model="downPrice"
                :precision="5"
                :step="0.00001"
                :min="0.00001"
                :max="100000"
              />
            </div>
          </div>
        </div>
        <div class="item">
          <div class="item_title">{{ $t("获利价") }}</div>
          <div class="item_group">
            <div class="inner_step">
              <el-input-number
                v-model="upPrice"
                :precision="5"
                :step="0.00001"
                :min="0.00001"
                :max="100000"
              />
            </div>
          </div>
        </div>
        <div class="item_btns">
          <el-button
            class="item_buy item_btn"
            type="success"
            @click="buyOrSell(activeType.id, 2)"
            >{{ $t("下单") }}</el-button
          >
        </div>
      </div>
    </div>
  </aside>
</template>

<script>
import { ElNotification } from "element-plus";
import { detailApi, addOrderApi } from "@/api/index";
export default {
  props: ["id"],
  data() {
    return {
      current: 0,
      num: 0.01, // 数量
      downPrice: null, //止损价
      price: 0, // 价格
      upPrice: null, //获利价
      beilv: ["2", "5", "10"],
      typeList: [
        { title: "Buy Limit", id: 1 },
        { title: "Sell Limit", id: 2 },
      ],
      activeType: { title: "Buy Limit", id: 1 },
      typeShow: false,
      stock: {},
      timer: null,
    };
  },
  computed: {
    sortList() {
      return [
        { name: this.$t("下单交易"), id: 1 },
        { name: this.$t("挂单交易"), id: 2 },
      ];
    },
  },
  mounted() {
    // this.getStockDetail();
  },
  unmounted() {
    clearInterval(this.timer);
  },
  methods: {
    changeSort(index) {
      console.log(index);
      if (this.current == index) return;
      this.current = index;
      this.num = 0.01;
      this.downPrice = null;
      this.upPrice = null;
      this.price = this.stock.sell_price;
      console.log(this.stock);
    },
    getStockDetail() {
      detailApi({ id: this.id, token: localStorage.getItem("token") }).then((res) => {
        this.stock = res.data;
        this.price = this.stock.sell_price;
        // this.downPrice = this.stock.sell_price;
        // this.upPrice = this.stock.sell_price;
        this.price = this.stock.sell_price;
      });
    },
    changeNum(item) {
      console.log(this.num, "1111111111");
      if (this.num >= 1000) {
        this.num = 1000;
        return;
      } else {
        this.num = this.num * item;
      }
    },
    buyOrSell(opt1, type) {
      addOrderApi({
        token: localStorage.getItem("token"),
        pro_id: this.stock.id,
        type: opt1,
        limit_type: type,
        num: this.num,
        s_l: this.downPrice,
        t_p: this.upPrice,
        price: this.price,
      }).then((res) => {
        if (res.code == 1) {
          ElNotification({
            message: res.msg,
            type: "success",
          });
        } else {
          ElNotification({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    chooseType(opt) {
      this.activeType = opt;
      this.typeShow = false;
    },
  },
  watch: {
    id(newVal) {
      clearInterval(this.timer);
      this.getStockDetail();
      this.timer = setInterval(() => {
        this.getStockDetail();
      }, 20000);
    },
    upPrice(newVal, oldVal) {
      if (newVal == "0.00001" && !oldVal) {
        this.upPrice = Number(this.stock.sell_price);
      }
    },
    downPrice(newVal, oldVal) {
      if (newVal == "0.00001" && !oldVal) {
        this.downPrice = Number(this.stock.sell_price);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
aside {
  width: 320px;
  background: #282b37;
  padding: 18px 20px;
  overflow-y: auto;
  .header {
    padding-bottom: 1rem;
    .title {
      font-size: 22px;
      color: #fff;
    }
    .tips {
      color: #838795;
      margin-top: 0.5rem;
    }
  }
  .sort {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #22252f;
    .item_inner {
      margin: 0 10px;
      cursor: pointer;
      .text {
        color: #fff;
        font-size: 15px;
        padding: 0 0 14px 0;
      }
      .inner_bottom {
        height: 3px;
        background-color: transparent;
        border-radius: 5px;
        transform: translateY(1px);
      }
      &.active_inner {
        .text {
          color: #f7d8a7;
        }
        .inner_bottom {
          background-color: #f7d8a7;
        }
      }
    }
  }
  .list {
    margin-top: 1rem;
    transition: opacity 0.15s linear;
    .item {
      color: #eee;
      padding-top: 0.25rem;
      padding-bottom: 1.5rem;
      .item_title {
        color: #838795;
      }
      .item_group {
        margin-top: 0.5rem;
        .inner_step {
          background-color: #22252f;
          border-radius: 5px;
          line-height: 50px;
          padding: 0 5px;
        }
        .inner_beilv {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 0.5rem;
          .beilv_item {
            display: block;
            color: #a5a8b4;
            width: 50px;
            text-align: center;
            background-color: #22252f;
            border-radius: 5px;
            line-height: 50px;
            padding: 0 5px;
            box-sizing: border-box;
            cursor: pointer;
            &:hover {
              color: #fff;
            }
          }
        }
        .price_box {
          background-color: #22252f;
          border-radius: 5px;
          line-height: 50px;
          padding: 0 5px;
          display: flex;
          align-items: center;
          position: relative;
          .price_item {
            font-size: 24px;
            margin: 40px 0 20px;
            text-align: center;
            line-height: 30px;
            flex: 1;
            border-left: solid 1px #383e4e;
            &:first-child {
              border-left: none;
            }
          }
          .price_num {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
          }
        }
      }
      .item_type {
        position: relative;
        .type_box {
          display: flex;
          align-items: center;
          padding: 0 20px;
          font-size: 16px;
          background-color: #22252f;
          border-radius: 5px;
          line-height: 50px;
          cursor: pointer;
          .type_title {
            flex: 1;
          }
        }
        .type_list {
          position: absolute;
          top: 0px;
          left: 0px;
          transform: translate3d(0px, 50px, 0px);
          right: 0;
          border-radius: 5px;
          margin-top: 5px;
          background-color: #2d303d;
          z-index: 1001;
          .type_item {
            color: #a5a8b4;
            font-size: 16px;
            display: block;
            height: 50px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
    .item_btns {
      display: flex;
      justify-content: space-between;
      align-items: center;
      column-gap: 20px;
      .item_btn {
        text-align: center;
        font-size: 16px;
        line-height: 50px;
        border-radius: 5px;
        flex: 1;
        height: 50px;
        background: #59d5c6;
        border: none;
        box-shadow: none;
        &:hover {
          color: #ddd;
        }
      }
      .item_buy {
        background: linear-gradient(81deg, #f7d8a7 0%, #f4cc8c 100%);
        color: #000;
        &:hover {
          color: #22252f;
        }
      }
      .el-button--danger {
        background: #f13832;
        margin-left: 0;
      }
    }
  }
  ::v-deep .el-input-number {
    width: 100%;
    height: 48px;
    line-height: 48px;
    background: transparent;
    box-shadow: none;
    border: none;
    .el-input-number__decrease,
    .el-input-number__increase {
      width: 46px;
      height: 46px;
      line-height: 46px;
      background: #22252f;
      border: none;
    }
    .el-input {
      .el-input__wrapper {
        box-shadow: none;
        border: none;
        background: #22252f;
        .el-input__inner {
          color: #fff;
        }
      }
    }
  }
}
</style>
